<div class="layui-container fly-marginTop fly-user-main">
  <!-- 会员中心的菜单 -->
  <ul class="layui-nav layui-nav-tree layui-inline" id="nav" lay-filter="user">
    <li class="layui-nav-item">
      <a href="{:url('home/user/index')}">
        <i class="layui-icon">&#xe609;</i>
        我的主页
      </a>
    </li>
    <li class="layui-nav-item layui-this">
      <a href="{:url('home/user/profile')}">
        <i class="layui-icon">&#xe620;</i>
        基本设置
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="{:url('home/post/index')}">
        <i class="layui-icon">&#xe6fb;</i>
        我的帖子
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="{:url('home/post/collect')}">
        <i class="layui-icon">&#xe83c;</i>
        我的收藏
      </a>
    </li>
    <li class="layui-nav-item">
      <a href="{:url('home/user/record')}">
        <i class="layui-icon">&#xe702;</i>
        积分消费记录
      </a>
    </li>
  </ul>
  
  <!-- 移动端按钮 -->
  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>
  
  <div class="site-tree-mobile layui-hide">
    <i class="layui-icon">&#xe602;</i>
  </div>
  <div class="site-mobile-shade"></div>
  
  
  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <!-- 二级菜单 -->
      <ul class="layui-tab-title" id="LAY_mine">
        <li class="layui-this" lay-id="info">我的资料</li>
        <li lay-id="avatar">密码</li>
        <li lay-id="pass">头像</li>
        <li lay-id="bind">封面</li>
      </ul>

      <!-- 表单结构 -->
      <div class="layui-tab-content" style="padding: 20px 0;">
        <!-- 我的资料 -->
        <div class="layui-form layui-form-pane layui-tab-item layui-show">
          <form method="post">
            <!-- 隐藏域 -->
            <input type="hidden" name="action" value="profile" />

            <!-- 邮箱 -->
            <div class="layui-form-item">
              <label for="email" class="layui-form-label">邮箱</label>
              <div class="layui-input-inline">
                <input type="email" id="email" name="email" lay-verify="required|email" value="{$LoginUser.email}" class="layui-input">
              </div>

              {if condition="$LoginUser.auth==0"}
              <div class="layui-form-mid layui-word-aux">
                如果您在邮箱已激活的情况下，变更了邮箱，需
                <a id="auth" href="javascript:void(0)" style="font-size: 12px; color: #4f99cf;">重新验证邮箱</a>。
              </div>
              {/if}
            </div>

            <!-- 昵称 -->
            <div class="layui-form-item">
              <label for="nickname" class="layui-form-label">昵称</label>
              <div class="layui-input-inline">
                <input type="text" id="nickname" name="nickname" lay-verify="required" placeholder="请输入昵称" value="{$LoginUser.nickname}" class="layui-input">
              </div>

              <!-- 性别 -->
              <div class="layui-inline">
                <div class="layui-input-inline" style="width: 250px;">
                  <input type="radio" name="sex" value="0" title="保密" {$LoginUser.sex == 0 ? "checked" : ""} />
                  <input type="radio" name="sex" value="1" title="男" {$LoginUser.sex == 1 ? "checked" : ""} />
                  <input type="radio" name="sex" value="2" title="女" {$LoginUser.sex == 2 ? "checked" : ""} />
                </div>
              </div>
            </div>

            <!-- 城市 -->
            <div class="layui-form-item">
              <label for="L_city" class="layui-form-label">城市</label>
              <!-- 省份 -->
              <div class="layui-input-inline">
                <select name="province" id="province" lay-filter="province" lay-verify="required">
                  <option value="">请选择省</option>
                  {foreach $province as $item}
                    <option {$LoginUser.province == $item.code ? "selected" :""} value="{$item.code}">{$item.name}</option>
                  {/foreach}
                </select>
              </div>

              <!-- 城市 -->
              <div class="layui-input-inline">
                <select name="city" id="city" lay-filter="city">
                  <option value="">请选择市</option>
                  {foreach $city as $item}
                    <option {$LoginUser.city == $item.code ? "selected" :""} value="{$item.code}">{$item.name}</option>
                  {/foreach}
                </select>
              </div>

              <!-- 县/区 -->
              <div class="layui-input-inline">
                <select name="district" id="district" lay-filter="district">
                  <option value="">请选择县/区</option>
                  {foreach $district as $item}
                    <option {$LoginUser.district == $item.code ? "selected" :""} value="{$item.code}">{$item.name}</option>
                  {/foreach}
                </select>
              </div>
            </div>

            <!-- 个人简介 -->
            <div class="layui-form-item layui-form-text">
              <label for="content" class="layui-form-label">个人简介</label>
              <div class="layui-input-block">
                <textarea placeholder="随便写些什么刷下存在感" id="content"  name="content" class="layui-textarea" style="height: 80px;">{$LoginUser.content}</textarea>
              </div>
            </div>

            <!-- 提交 -->
            <div class="layui-form-item">
              <button class="layui-btn" type="submit">确认修改</button>
            </div>
          </form>
        </div>

        <!-- 密码 -->
        <div class="layui-form layui-form-pane layui-tab-item">
          <form method="post">
            <!-- 隐藏域 -->
            <input type="hidden" name="action" value="password" />

            <!-- 当前密码 -->
            <div class="layui-form-item">
              <label for="nowpass" class="layui-form-label">当前密码</label>
              <div class="layui-input-inline">
                <input type="password" id="nowpass" name="nowpass" lay-verify="required" class="layui-input" />
              </div>
            </div>

            <!-- 新密码 -->
            <div class="layui-form-item">
              <label for="password" class="layui-form-label">新密码</label>
              <div class="layui-input-inline">
                <input type="password" id="password" name="password" lay-verify="required" class="layui-input" />
              </div>
            </div>

            <!-- 确认密码 -->
            <div class="layui-form-item">
              <label for="repass" class="layui-form-label">确认密码</label>
              <div class="layui-input-inline">
                <input type="password" id="repass" name="repass" lay-verify="required|repass" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item">
              <button class="layui-btn" type="submit">确认修改</button>
            </div>
          </form>
        </div>
          
        <!-- 头像 -->
        <div style="width: 41%;" class="layui-form layui-form-pane layui-tab-item">
          <form method="post" enctype="multipart/form-data">
            <!-- 隐藏域 -->
            <input type="hidden" name="action" value="avatar" />

            <!-- 头像 -->
            <div class="layui-form-item">
              <div class="avatar-add">
                <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>

                <button onclick="avatar.click()" type="button" class="layui-btn upload-img">
                  <i class="layui-icon">&#xe67c;</i>上传头像
                </button>

                <input type="file" name="avatar" id="avatar" hidden />

                <img src="{$Think.cookie.LoginUser['avatar']}" />
              </div>
            </div>

            <!-- 按钮 -->
            <div class="layui-form-item" style="text-align: center;">
              <button class="layui-btn" type="submit">确认修改</button>
            </div>
          </form>
        </div>

        <!-- 背景 -->
        <div style="width: 41%;" class="layui-form layui-form-pane layui-tab-item">
          <form method="post" enctype="multipart/form-data">
            <!-- 隐藏域 -->
            <input type="hidden" name="action" value="cover" />

            <!-- 封面 -->
            <div class="layui-form-item">
              <div class="avatar-add">
                <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>

                <button onclick="cover.click()" type="button" class="layui-btn upload-img">
                  <i class="layui-icon">&#xe67c;</i>上传封面
                </button>

                <input type="file" name="cover" id="cover" hidden />

                <img src="/{$Think.cookie.LoginUser['cover']}" />
              </div>
            </div>

            <!-- 按钮 -->
            <div class="layui-form-item" style="text-align: center;">
              <button class="layui-btn" type="submit">确认修改</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="/assets/home/layui/layui.js"></script>
<script>
  layui.use(['layer','jquery','form'],function(){
    var layer=layui.layer
    var form=layui.form
    var $=layui.jquery

    // 给省份绑定事件
    form.on('select(province)',function(data){
      var province=data.value

      // 异步请求
      $.ajax({
        type:'post',
        url:`{:url('home/user/area')}`,
        data:`code=${province}`,
        dataType:'json',
        success:function(success){
          var output='<option>请选择城市</option>';

          for(var city of success){
            output += `<option value="${city.code}">${city.name}</option>`
          }

          $('#city').html(output)
          $('#district').html(`<option value="">请选择县/区</option>`)

          // 用layui的方式渲染一下select下拉框
          form.render('select')
        }
      })
    })

    // 给城市绑定事件 lay-filter
    form.on('select(city)',function(data){
      var city=data.value

      // 异步请求
      $.ajax({
        type:'post',
        url:`{:url('home/user/area')}`,
        data:`code=${city}`,
        dataType:'json',
        success:function(success){
          var output='<option>请选择县/区</option>';

          for(var item of success){
            output += `<option value="${item.code}">${item.name}</option>`
          }

          $('#district').html(output)

          // 用layui的方式渲染一下select下拉框
          form.render('select')
        }
      })
    })

    // 确认密码
    form.verify({
      repass:function(value){
        // 验证密码和确认密码
        if($(`input[name='password']`).val() != value){
          return '密码和确认密码不一致'
        }
      }
    })

    // 邮箱验证
    $("#auth").click(function(){
      if(confirm('是否发送邮箱验证')){
        $.ajax({
          type:'post',
          url:`{:url('/home/user/email')}`,
          dataType:'json',
          success:function(success){
            // 提醒信息
            layer.msg(success.msg)
          }
        })
      }
    })
  })

</script>